<template>
  <div class="parent d-flex flex-column">
    <el-tabs ref="tabs" v-model.trim="activeName" :before-leave="beforeLeave">
      <el-tab-pane
        v-for="item in tabList"
        :key="item.name"
        lazy
        :label="item.label"
        :name="item.name"
        class="paneHeight"
      >
        <component :is="item.currentView" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import HttpPush from "./httpPush";
import GATPush from "./GATPush";

export default {
  components: { HttpPush, GATPush },
  data() {
    return {
      activeName: "httpPush",
      tabList: [
        {
          label: this.$t("dataPush.httppush"),
          name: "httpPush",
          currentView: HttpPush,
        },
        {
          label: this.$t("dataPush.GATPush"),
          name: "GATPush",
          currentView: GATPush,
        },
      ],
    };
  },
  created() {
    this.activeName = this.initActiveName();
  },
  methods: {
    initActiveName() {
      const array = ["httpPush", "GATPush"];
      const tab = this.$route.query.tabs;
      if (tab && array.includes(tab)) {
        return tab;
      }
      return array[0];
    },
    // 切换tab页之前
    beforeLeave(activeName) {
      if (activeName) {
        this.$router.replace({ query: {} });
        this.$router.replace({
          query: { tabs: activeName },
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.parent {
  font-size: 14px;
  height: 100%;
  background: #ffffff;
  border-radius: 20px;
  .el-tabs {
    height: 100%;
    /deep/ .el-tabs__header {
      margin-bottom: 0px;
    }
    /deep/ .el-tabs__content {
      height: calc(100% - 50px);
      overflow: auto;
    }
    .paneHeight {
      height: 100%;
      padding-top: 20px;
    }
  }
}
</style>
